:root {
  --body-loud-color: #101828 !important;
  --body-fg: #475467 !important;
  --button-bg: #ffffff !important;
  --button-fg: #344054 !important;
  --button-hover-bg: #ffffff !important;
  --button-hover-fg: #101828 !important;
  --button-border-color: #d0d5dd;
}
#content,
.content {
  padding: 0 !important;
}
#content .unsubscribe-content {
  font-size: 14px;
  line-height: 20px;
}
.no-auth #site-name a {
  margin-left: 0;
}
.no-auth #site-name {
  margin-bottom: 0;
}
h1 {
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--body-loud-color);
}
.unsubscribe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 95vh;
}
.unsubscribe-content {
  padding: 24px;
  text-align: center;
  box-shadow:
    0px 20px 24px -4px rgba(16, 24, 40, 0.08),
    0px 8px 8px -4px rgba(16, 24, 40, 0.03);
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
}
.unsubscribe-content h1 {
  margin-top: 10px;
}
.status-msg-container {
  margin-top: -16px;
  margin-bottom: 0px;
}
.email-icon-container {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  background-color: #fef0c7;
  border-radius: 24px;
}
.email-icon {
  width: 24px;
  height: auto;
  margin: 15px auto;
}
#toggle-btn {
  width: 100%;
  margin: 10px 0;
}
.button {
  border: 1px solid var(--button-border-color);
  background-color: var(--button-bg);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  padding: 10px 16px;
  color: var(--button-fg);
  box-shadow:
    0px 1px 2px rgba(16, 24, 40, 0.05),
    inset 0px 0px 0px 1px rgba(16, 24, 40, 0.18),
    inset 0px -2px 0px rgba(16, 24, 40, 0.05);
  border-radius: 8px;
}
.button:hover,
.button:focus,
.button:active {
  color: var(--button-hover-fg);
  border-color: var(--button-hover-fg);
  background-color: var(--button-hover-bg);
}
.footer {
  font-weight: 400;
  line-height: 20px;
}
#manage-preferences .footer p {
  margin: 0px;
}
#manage-preferences .confirmation-msg {
  color: #067647;
  font-weight: bold;
}
#error-msg-container {
  margin-top: 32px;
}
#invalid-token-msg-container {
  margin: 32px auto;
  text-align: center;
}
#invalid-token-msg-container h2 {
  margin-bottom: 0;
}
#invalid-token-msg-container p {
  margin-top: 0;
}
